<template>
	<view class="search-bnak-page">
		<view class="search-bnak-content" v-if="bankType == 'bank'">
			<view class="search-bnak-detail">
				<view class="">
					<view class="search-bnak-input">
						<image :src="imglink + 'member/search-icon.png'" mode="" @click="getOpenBank"></image>
						<input type="text" v-model="bankName" placeholder="请输入银行名称"/>
					</view>
					<view class="search-bnak-title" @click="getOpenBank">
						搜索
					</view>
				</view>
			</view>
			<view class="all-bank-name">
				<scroll-view scroll-y="true" :style="'height:'+height+'px'" scroll-with-animation  @scrolltolower="LoadingMore">
					<view class="all-bank-name-details" v-for="item in bankList" :key='item.bankid' @click="chooseBank(item)">
						{{item.bankname}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="search-bnak-content" v-if="bankType == 'branch_bank'">
			<view class="search-bnak-detail">
				<view class="">
					<view class="search-bnak-input">
						<image :src="imglink + 'member/search-icon.png'" mode=""></image>
						<input type="text" v-model="subBranchName" placeholder="请输入支行银行名称"/>
					</view>
					<view class="search-bnak-title" @click="getSubBranch">
						搜索
					</view>
				</view>
			</view>
			<view class="all-bank-name">
				<view class="all-bank-name-details" v-for="item in subBranchList" :key='item.number' @click="chooseSub(item)">
					{{ item.branchname }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				imglink: this.$store.state.imgLink,
				bankType:'',
				bank_id:0,
				bankName:'',
				bankList:[],
				subBranchName:'',
				subBranchList:[],
				height:0,
			}
		},
		onLoad(options) {
			
			console.log(options)
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			this.bankType = options.bank_type
			if(this.bankType == 'bank'){
				uni.setNavigationBarTitle({
					title:'选择开户银行'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'选择开户支行'
				})
			}
			
			if(!isNaN(options.bank_id)){
				this.bank_id = options.bank_id
			}
		},
		onShow() {
			if(this.bankType == 'bank'){
				this.getOpenBank()
			}else{
				this.getSubBranch()
			}
		},
		methods:{
			LoadingMore(){
				
			},
			// 获取开户银行
			getOpenBank(){
				let data = {
					token:this.$store.getters.getToken,
					name:this.bankName
				}
				this.$api.gainAllBank(data).then(res => {
					if(res.status){
						this.bankList = res.list
					}
					console.log('所有开户银行',this.bankList)
					console.log('所有开户银行',this.bankList.length)
				}).catch(err => {
					console.log(err)
				})
			},
			chooseBank(item){
				// this.bankName = item.bankname
				// this.$store.state.bankOfDeposit = item.bankname
				// this.$store.state.bankOfDepositId = item.bankid
				console.log(item);
				let identification = uni.getStorageSync('identification')
				identification.bank_id = item.bankid
				identification.bank_name = item.bankname
				uni.setStorageSync('identification',identification)
				uni.redirectTo({
					url:'/pages/memberCenter/shop/BankCardBinding/sureBindingFirm?store_id='+this.store_id + '&step_index=1'
				})
			},
			// 获取支行
			getSubBranch(){
				let data = {
					token:this.$store.getters.getToken,
					name:this.subBranchName,
					bankid:this.bank_id,
					page:this.page,
					page_size:20,
				}
				this.$api.gainAllBrabch(data).then(res => {
					console.log(res)
					if(res.status){
						this.subBranchList = res.list
					}
					console.log('所有支行',this.subBranchList)
				}).catch(err => {
					console.log(err)
				})
			},
			chooseSub(item){
				let identification = uni.getStorageSync('identification')
				identification.branch_bank_id = item.number
				identification.branch_bank_name = item.branchname
				uni.setStorageSync('identification',identification)
				uni.redirectTo({
					url:'/pages/memberCenter/shop/BankCardBinding/sureBindingFirm?store_id='+this.store_id + '&step_index=1'
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.search-bnak-page{
		width: 100%;
		padding-top: 100upx;
		box-sizing: border-box;
	}
	.search-bnak-detail{
		width: 100%;
		padding: 16upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		top: 0;left: 0;
		margin-bottom: 20upx;
	}
	.search-bnak-detail>view{
		width: 100%;
		height: 72upx;
		border-radius: 36upx;
		background: #F3F3F4;
		display: flex;
		justify-content: space-between;
	}
	.search-bnak-input{
		display: flex;
		flex-grow: 1;
		padding-left: 30upx;
		box-sizing: border-box;
		padding-top: 16upx;
		justify-content: space-between;
	}
	.search-bnak-input>image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.search-bnak-input>input{
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 20upx;
	}
	.search-bnak-title{
		width: 116upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		background: #FF8B46;
		border-radius: 0 36upx 36upx 0;
		color: #FFFFFF;
		font-size: 28upx;
	}
	.all-bank-name{
		width: 100%;
		padding-left: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.all-bank-name-details{
		width: 100%;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		font-size: 28upx;
		color: #666666;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-bank-name-details:last-child{
		border-bottom: 0;
	}
</style>
